<template>
  <div>
    <div class="crumbs">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!-- 条件查询 -->
         <!-- 按日期查询 -->
        <el-date-picker
          v-model="timevalue"
          type="date"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
        <el-input
          v-model="query.name"
          placeholder="请输入需要查询的订单"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      </div>
      <!-- 订单表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        size="large"
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="orderlId"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>


        <el-table-column
          prop="name"
          label="景点名称"
          width="200"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="number"
          label="数量"
          width="100"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="description"
          label="订单描述"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="content"
          label="订单备注"
          align="center"
        ></el-table-column>
        

        <el-table-column
          prop="createdAt"
          label="创建时间"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.row)"
              >详情</el-button
            >

            <el-popconfirm
              title="确定要删除此订单"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row.orderlId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination  
          v-if="totalCount"  
          v-model:currentPage="query.currentPage"  
          v-model:page-size="query.pageSize"  
          layout="prev, pager, next, jumper"  
          :total="totalCount"  
          @current-change="handlePageChange"  
        />
      </div>
    </div>

    <!-- 订单详情 -->
    <el-dialog  
    title="订单详情"  
    v-model="dialogVisible"  
    width="50%"  
  >  
    <div>  
      <p>订单ID: {{ selectedOrder.orderlId }}</p> 
      <p>景点ID: {{ selectedOrder.travelId }}</p>  
      <p>景点名称: {{ selectedOrder.name }}</p> 
      <p>购买数量: {{ selectedOrder.number }} 张</p> 
      <p>描述: {{ selectedOrder.description }}</p> 
      <p>备注: {{ selectedOrder.content }}</p> 
      <p>订单创建时间: {{ selectedOrder.createdAt }}</p> 
    </div>  
    <div slot="footer" class="dialog-footer">  
      <el-button @click="dialogVisible = false">关闭</el-button>  
    </div>  
  </el-dialog> 
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification, ElMessage } from "element-plus";
import { EditPen, Search } from "@element-plus/icons-vue";
import { onMounted } from "vue";
// 动态生成面包屑导航
let breadList = [];
// 路由集合
const route = useRoute();
const getBreadcrumb = (url) => {
  let matched = url.matched;
  //如果不是首页
  if("Home" == matched[0].name) {
    matched[0].meta = { title: "系统首页" };
  }
  breadList = matched;
};
watch(
  route,
  (newValue, oldValue) => {
    getBreadcrumb(newValue);
  },
  { deep: true, immediate: true }
);

const timevalue = ref('')
const query = reactive({
  currentPage: 1,
  pageSize: 5,
  type:'',
  name:''
});
const tableData = ref([]);
const totalCount = ref(0);

// 格式化日期
function formatDate(dateString){
  const datemsg = new Date(dateString)
  return datemsg.toISOString().split('T')[0]
}

// 删除订单
const handleDelete = async (orderlId) => {  
  try {  
    await request.request({  
      url: '/order/deleteOrder',  
      method: 'post',  
      data: { orderlId } 
    });  
    ElMessage.success('订单删除成功！');  
    // 重新获取订单列表，显示更新  
    handleSearch()
  } catch (error) {  
    ElMessage.error('删除订单失败，请重试！');  
    console.error('删除订单时发生错误:', error);  
  }  
};  

// 支持分页和默认查询  
const handleSearch = async () => {  
  let params = {  
    name: query.name,  
    date: timevalue.value ? formatDate(timevalue.value) : undefined,  
    page: query.currentPage,  
    pageSize: query.pageSize,  
  };  
  
  try {  
    const res = await request.request({  
      url: '/order/getSpecificData',  
      method: 'get',  
      params: params,  
    });  
  
    console.log('查询结果:', res.data);  
    tableData.value = res.data.data.map(order => ({  
      ...order,  
      createdAt: formatDate(order.createdAt),  
    }));  
    totalCount.value = res.data.meta.totalCount; 
  } catch (error) {  
    ElMessage.error('查询失败');  
    console.error('查询时发生错误:', error);  
  }  
};  

const handlePageChange = (page) => {  
  query.currentPage = page;  
  handleSearch();  
};
// 在组件挂载时调用，加载默认数据  
onMounted(() => {  
  handleSearch();  
});

// 详情
let dialogVisible = ref(false)
let selectedOrder = ref(null)
const handleEdit = (order)=>{
    selectedOrder.value = order; // 将当前选中的订单数据赋值给selectedOrder  
    dialogVisible.value = true;
    console.log(selectedOrder.value);
    
}

</script>

<style>
.hidden .el-upload--picture-card {
  display: none;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
